<template>
  <div>
    <!--表格栏-->
    <el-table ref="tabData" row-key="id" :data="data.list" :highlight-current-row="highlightCurrentRow" @selection-change="selectionChange" @sort-change="tableSortChange" :default-sort="orderParam" v-loading="loading" element-loading-text="加载中..." :border="border" :stripe="stripe" :show-overflow-tooltip="showOverflowTooltip" :max-height="maxHeight" :size="size" :align="align" style="width:100%;">
      <el-table-column type="selection" width="45" v-if="showBatchDelete & showOperation" />
      <el-table-column type="index" width="45" v-if="showIndex" />
      <el-table-column v-for="column in columns" header-align="center" align="center" :prop="column.prop" :label="column.label" :width="column.width" :min-width="column.minWidth" :fixed="column.fixed" :key="column.prop" :type="column.type" :formatter="column.formatter" :sortable="column.sortable==null?true:column.sortable">
        <template slot-scope="scope">
          <span v-html="showHtml(scope)" />
        </template>
      </el-table-column>
      <el-table-column label="操作" :width="operationWidth" fixed="right" v-if="showOperation && ($_has(permsEdit) || $_has(permsDelete))" header-align="center" align="center">
        <template slot-scope="scope">
          <kt-button icon="fa fa-edit" label="编辑" :perms="permsEdit" :size="size" @click="handleEdit(scope.$index, scope.row)" />
          <kt-button icon="fa fa-trash" label="删除" :perms="permsDelete" type="danger" :size="size" @click="handleDelete(scope.$index, scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:10px;">
      <kt-button label="批量删除" :perms="permsDelete" :size="size" type="danger" @click="handleBatchDelete()" :disabled="this.selections.length===0" style="float:left;" v-if="showBatchDelete & showOperation" />
      <el-pagination layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 30, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageRequest.pageNum" :page-size="pageRequest.pageSize" :total="data.totalSize" style="float:right;" />
    </div>
  </div>
</template>

<script>
import KtButton from '@/views/Core/KtButton'
export default {
  name: 'KtTable',
  components: {
    KtButton
  },
  props: {
    // 表格列配置
    columns: Array,
    // 表格分页数据
    data: Object,
    // 分页参数
    pageParams: Object,
    // 编辑权限标识
    permsEdit: String,
    // 删除权限标识
    permsDelete: String,
    // 尺寸样式
    size: { type: String, default: 'mini' },
    // 文本对齐方式
    align: { type: String, default: 'left' },
    // 除表格外的高度
    otherHeight: { type: Number, default: 110 },
    // 是否显示操作组件
    showOperation: { type: Boolean, default: true },
    // 是否显示序号
    showIndex: { type: Boolean, default: true },
    // 是否显示边框
    border: { type: Boolean, default: false },
    // 是否显示斑马线
    stripe: { type: Boolean, default: true },
    // 是否高亮当前行
    highlightCurrentRow: { type: Boolean, default: true },
    // 是否单行显示
    showOverflowTooltip: { type: Boolean, default: true },
    // 是否显示操作组件
    showBatchDelete: { type: Boolean, default: true }
  },
  data () {
    return {
      maxHeight: 1000,
      // 分页信息
      pageRequest: this.pageParams,
      // 排序参数
      orderParam: {},
      // 加载标识
      loading: false,
      // 除表格外的高度
      operationWidth: 185,
      // 列表选中列
      selections: []
    }
  },
  methods: {
    showHtml (scope) {
      let value = scope.row[scope.column.property]
      if (scope.column.formatter !== undefined) {
        return scope.column.formatter(scope.row, scope.column, value, scope.$index)
      }
      return value
    },
    // 分页查询
    findPage () {
      this.loading = true
      let callback = res => {
        this.loading = false
      }
      this.$emit('find-page', { pageRequest: this.pageRequest, callback: callback })
    },
    // 选择切换
    selectionChange (selections) {
      this.selections = selections
      this.$emit('selection-change', { selections: selections })
    },
    // 排序切换
    tableSortChange (column) {
      this.pageRequest.pageNum = 1
      if (column.order === 'descending') {
        this.pageRequest.sortby = column.prop
        this.pageRequest.order = 'desc'
      } else {
        this.pageRequest.sortby = column.prop
        this.pageRequest.order = 'asc'
      }
      this.findPage()
    },
    // 换页刷新
    handleSizeChange (pageSize) {
      this.pageRequest.pageSize = pageSize
      this.findPage()
    },
    handleCurrentChange (pageNum) {
      this.pageRequest.pageNum = pageNum
      this.findPage()
    },
    // 编辑
    handleEdit (index, row) {
      this.$emit('handle-edit', { index: index, row: row })
    },
    // 删除
    handleDelete (index, row) {
      this.delete(row.id)
    },
    // 批量删除
    handleBatchDelete () {
      let ids = this.selections.map(item => item.id).toString()
      this.delete(ids)
    },
    // 删除操作
    delete (ids) {
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        let params = (ids + '').split(',')
        this.loading = true
        let callback = res => {
          if (res.code === 0) {
            this.$message({ message: '删除成功', type: 'success' })
            this.findPage()
          } else {
            this.$message({ message: '操作失败, ' + res.message, type: 'error' })
          }
          this.loading = false
        }
        this.$emit('handle-delete', { params: params, callback: callback })
      }).catch(() => {
      })
    }
  },
  mounted () {
    if (this.$_has(this.permsEdit) && this.$_has(this.permsDelete)) {
      this.operationWidth = 185
    } else if (this.$_has(this.permsEdit) || this.$_has(this.permsDelete)) {
      this.operationWidth = 90
    }
    this.maxHeight = window.innerHeight - this.$refs.tabData.$el.offsetTop - this.otherHeight
    if (this.pageRequest.sortby !== undefined) {
      this.orderParam.prop = this.pageRequest.sortby
      this.orderParam.order = (this.pageRequest.order === 'desc' ? 'descending' : 'ascending')
    }
    this.findPage()
  }
}
</script>
